<template>
  <div>
    <ko-card :title="$t('business.configuration.metrics')">
      <el-form ref="form" label-position="top" :model="form">
        <el-card
          v-for="(row, index) in form.metrics"
          v-bind:key="index"
          style="
            background-color: #292a2e;
            margin-top: 10px;
            position: relative;
          "
        >
          <div
            style="float: right; padding: 3px 0; position: relative; z-index: 1"
          >
            <el-button
              v-if="form.metrics.length > 1"
              type="text"
              @click="removeMetrics(index)"
              >{{ $t("commons.button.delete") }}
            </el-button>
          </div>
          <div>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item :label="$t('business.configuration.source')">
                  <el-select
                    v-model="row.type"
                    style="width: 100%"
                    value-key="type"
                    @change="onChange(row, index)"
                  >
                    <el-option label="Resource" value="Resource" />
                    <el-option label="External" value="External" />
                    <el-option label="Object" value="Object" />
                    <el-option label="Pods" value="Pods" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <ko-hpa-metrics-types :row="form.metrics[index]" />
          </div>
        </el-card>
      </el-form>
      <el-button style="margin-top: 10px" @click="addMetrics">{{
        $t("commons.button.add")
      }}</el-button>
    </ko-card>
  </div>
</template>

<script setup lang="ts">
import KoCard from "@/views/domain/kubeHud/views/components/ko-card/index.vue";
import KoHpaMetricsTypes from "@/views/domain/kubeHud/views/components/ko-configuration/ko-hpa-meterics-types/ko-hpa-metrics-types.vue";
import { onMounted, reactive, ref } from "vue";

const metricsObj = defineModel<any>("metricsObj");
const form = reactive({
  metrics: []
});

const external = ref({});
const pods = ref({});
const resource = ref({});
const object = ref({});

const onChange = (row, index) => {
  switch (row.type) {
    case "Resource":
      resource.value = {
        type: "Resource",
        resource: {
          name: "cpu",
          target: {
            type: "Utilization",
            averageUtilization: 80
          }
        }
      };
      form.metrics[index] = resource.value;
      break;
    case "External":
      external.value = {
        type: "External",
        external: {
          type: "io.k8s.api.autoscaling.v2beta2.externalmetricsource",
          metric: {
            name: "",
            selector: {
              matchExpressions: []
            }
          },
          target: {
            type: "AverageValue",
            averageValue: 80
          }
        }
      };
      form.metrics[index] = external.value;
      break;
    case "Pods": {
      pods.value = {
        type: "Pods",
        pods: {
          type: "io.k8s.api.autoscaling.v2beta2.podsmetricsource",
          metric: {
            name: "",
            selector: {
              matchExpressions: []
            }
          },
          target: {
            type: "AverageValue",
            averageValue: 80
          }
        }
      };
      form.metrics[index] = pods.value;
      break;
    }
    case "Object": {
      object.value = {
        type: "Object",
        object: {
          type: "io.k8s.api.autoscaling.v2beta2.objectmetricsource",
          metric: {
            name: "",
            selector: {
              matchExpressions: []
            }
          },
          target: {
            type: "AverageValue",
            averageValue: 80
          },
          describedObject: {
            apiVersion: "",
            kind: "",
            name: ""
          }
        }
      };
      form.metrics[index] = object.value;
      break;
    }
  }

  metricsObj.value = form.metrics;
};

const addResource = () => {
  resource.value = {
    type: "Resource",
    resource: {
      name: "cpu",
      target: {
        type: "Utilization",
        averageUtilization: 80
      }
    }
  };
  form.metrics.push(resource.value);
};

const addMetrics = () => {
  addResource();
};

const removeMetrics = index => {
  form.metrics.splice(index, 1);
};

onMounted(() => {
  if (metricsObj.value) {
    form.metrics = metricsObj.value;
  } else {
    addResource();
    metricsObj.value = form.metrics;
  }
});
</script>

<style scoped></style>
